<template>
  <div class="allTop">
    <el-dialog
      title="查看"
      :visible.sync="visible"
      @close="$emit('update:show', false)"
      :show="show"
      width="1200px"
    >
      <div class="checkMain">
        <div class="checkMain_0">
          <h2>库存信息</h2>
          <div>农具名称：{{ njName }}</div>
          <div>型号：{{ njModel }}</div>
          <div>库存总数：{{ njQty }}{{ njUnit }}</div>
          <div>生产商：{{ njSupplier }}</div>
          <div
            style="width:200px;height:150px;background:black;margin-top:15px"
          ></div>
        </div>
        <div class="checkMain_1">
          <div style="color:black;line-height:50px">批次信息</div>
          <el-table
            height="320"
            :header-cell-style="tableHeaderColor"
            :row-class-name="tableRowClassName"
            :data="data"
            style="width: 100%;border:1px solid black"
          >
        <el-table-column
          header-align="center"
          align="center"
          prop="id"
          label="序号"
        >
        <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
</el-table-column>
            <el-table-column prop="batchCode" label="批次单号" width="width">
            </el-table-column>
            <el-table-column prop="optType" label="操作" width="width">
            </el-table-column>
            <el-table-column prop="personId" label="操作人" width="width">
            </el-table-column>
            <el-table-column prop="gmtCreate" label="时间" width="width">
            </el-table-column>
            <el-table-column prop="qty" label="批次数量" width="width">
            </el-table-column>
            <el-table-column  label="单价" width="width">
              <template slot-scope="scope">
                  {{scope.row.price / 100}}元
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="complete"
          style="    color: #fff;
    background-color: #11C26D;
    border-color: #11C26D;"
          >完 成</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { querynjCheck , querynjChecklist} from "@/api/manage";
export default {
  data() {
    return {
      data: [],
      // dialogVisible:show
      visible: false,
      njName:null,
      njModel:null,
      njQty:null,
      njUnit:null,
      njSupplier:null
    };
  },
  methods: {
    show(status, row) {
      this.visible = status;
      querynjCheck(row.id).then(res => {
        let p = res.data.data
        this.njName = p.machineryName;
        this.njModel = p.model;
        this.njQty = p.qty;
        this.njUnit = p.unit;
        this.njSupplier = p.supplier;
      });
      querynjChecklist(row.id).then(respone=>{
        this.data = respone.data.rows
      })
    },
        //照片上传
    uploadSectionFile({ file, onError, onSuccess }) {
        console.log(file)
      const fileType = file.type,
        fileName = file.name,
        isImage = fileType.indexOf("image") != -1,
        isLt500KB = file.size / 1024 < 500;
      // 这里常规检验，看项目需求而定
      if (!isImage) {
        this.$message.error("只能上传图片格式png、jpg、gif!");
        return;
      }
      if (!isLt500KB) {
        this.$message.error("只能上传图片大小小于500KB");
        return;
      }
      const formData = new FormData();
      formData.append("file", file);
      const loading = this.$load(this);
      upload(formData)
        .then(res => {
          if (res.data.code == 200) {
            this.form.photoUrl = res.data.data.path;
            this.imageUrl = res.data.data.url + this.form.photoUrl;
          }
          loading.close();
        })
        .catch(err => {
          console.log(err);
          loading.close();
          this.$message({ type: "error", message: "上传异常:" + err });
        });
    },
    complete() {
      this.visible = false;
    },
    // 设置表头样式
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      return "background-color: #009865;color: #000;font-weight: 500;";
    },
    // 设置斑马样式
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return "columns-row-a";
      } else if (rowIndex % 2 === 1) {
        return "columns-row-b";
      }
    }
  }
};
</script>

<style scoped>
.el-table .columns-row-a {
  background: black;
}

.el-table .columns-row-b {
  background: #ffffff;
}
.checkMain {
  height: 400px;
  width: 100%;
  /* background: red; */
  display: flex;
}
.checkMain_0 {
  padding: 10px;
  width: 20%;
  height: 100%;
  /* background: hotpink; */
}
.checkMain_1 {
  flex: 1;
  /* background: green; */
}
.allTop >>> .el-dialog__header {
  background: #009865;
}
.allTop >>> .el-dialog__title {
  color: white;
  font-size: 16px;
}
.allTop >>> .el-dialog__header {
  padding: 10px 10px 10px;
}
.allTop >>> .el-dialog__headerbtn {
  position: absolute;
  top: 15px;
  right: 20px;
  padding: 0;
  background: 0 0;
  border: none;
  outline: 0;
  cursor: pointer;
  font-size: 16px;
}
/* .allTop >>>.el-table__body-wrapper{
height: 200px;
overflow-y: auto;
} */
/deep/.el-table--scrollable-y ::-webkit-scrollbar {
  display: none;
}
.allTop >>> .gutter {
  background: #009865 !important;
}
</style>
